<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./reviews/css/normalize.css">
    <link rel="stylesheet" href="./reviews/css/resize.css">
    <link rel="stylesheet" href="./reviews/css/init.css">
    <link rel="stylesheet" href="./reviews/css/swipe.css">
    <script type="text/javascript" src="./reviews/js/rem.js"></script>

    <script src="./reviews/js/zepto.min.js"></script>
    <script src="./reviews/js/touch.min.js"></script>
    <script src="./reviews/js/fx.js"></script>
    <script src="./reviews/js/fx_methods.js"></script>
    <script src="./reviews/js/selector.js"></script>

</head>


<body>
    <!-- 圆形进度条 -->
    <div class="init">
        <canvas id="img"></canvas>
    </div>
    <!-- 开始页面 -->
    <div class="start" style="display: none;">
        <img class="img" src="./reviews/img/card_first.png" alt="开始">
    </div>

    <!-- 题目页面 -->
    <!-- 这里的数据可以从后台获取，渲染 -->
    <div class="main" style="display: none;">
        <section class="carousel">
            <ul>
                <li data-id='0'>
                    <p class="title">
                        你的答案是啥？
                    </p>
                    <a href="#"><img src="./reviews/img/test1.png" alt=""></a>
                    <p class="answer" data-result="美女">
                        <span class="left">
                            美女
                        </span>
                        <span class="right">
                            野兽
                        </span>
                    </p>
                </li>
                <li data-id="1">
                    <p class="title">
                        你的答案是啥？
                    </p>
                    <a href="#"><img height="auto" src="./reviews/img/test2.png" alt=""></a>
                    <p class="answer" data-result="宝塔">
                        <span class="left">
                            河妖
                        </span>
                        <span class="right">
                            宝塔
                        </span>
                    </p>
                </li>
                <li data-id="2">
                    <p class="title">
                        你的答案是啥？
                    </p>
                    <a href="#"><img height="auto" src="./reviews/img/test3.png" alt=""></a>
                    <p class="answer" data-result="诸葛神侯">
                        <span class="left">
                            长发美女
                        </span>
                        <span class="right">
                            诸葛神侯
                        </span>
                    </p>
                </li>
                <li data-id="3">
                    <p class="title">
                        你的答案是啥？
                    </p>
                    <a href="#"><img height="auto" src="./reviews/img/test4.png" alt=""></a>
                    <p class="answer" data-result="肌肉男">
                        <span class="left">
                            暴力帅哥
                        </span>
                        <span class="right">
                            肌肉男
                        </span>
                    </p>
                </li>
                <li data-id="4">
                    <p class="title">
                        你的答案是啥？
                    </p>
                    <a href="#"><img height="auto" src="./reviews/img/test5.png" alt=""></a>
                    <p class="answer" data-result="琵琶女">
                        <span class="left">
                            琵琶女
                        </span>
                        <span class="right">
                            妖女
                        </span>
                    </p>
                </li>
            </ul>
            <ol class="points"></ol>
        </section>
    </div>

    <!-- 查看结果页面 -->
    <div class="result" style="display: none;">
        <img class="img" src="./reviews/img/card_end.png" alt="结束">
    </div>

    <!-- 分数 -->
    <div class="score" style="display: none;">
        <span class="red"></span>
    </div>
</body>
<script src="./reviews/js/canvas.js"></script>
<script src="./reviews/js/start.js"></script>
<script src="./reviews/js/swipe.js"></script>
<script src="./reviews/js/answer.js"></script>
<script src="./reviews/js/result.js"></script>

</html>